<template>
    <el-form ref="ruleFormRef" :model="formInline" :rules="formRules" label-width="auto" label-position="top"
        v-loading="isLoading">
        <el-row :gutter="30">
            <re-col :value='24' :xs='24' :sm='24'>
                <el-form-item :label='titles?.graphImage' prop='graphImage'>
                    <ReUpload v-model:files="formInline.graphImage" :limit="1" />
                </el-form-item>
            </re-col>
            <re-col :value='24' :xs='24' :sm='24'>
                <el-form-item :label='titles?.graphName' prop='graphName'>
                    <el-input v-model.trim='formInline.graphName' clearable :placeholder='prompt?.graphName' />
                </el-form-item>
            </re-col>
            <re-col :value='24' :xs='24' :sm='24'>
                <el-form-item :label='titles?.groupId' prop='groupId'>
                    <folderSelect v-model='formInline.groupId' :unity-id="formInline?.unityId" :is-public="formInline?.isPublic"
                        clearable :placeholder='prompt?.groupId' :style="{ width: '100%' }" />
                </el-form-item>
            </re-col>
        </el-row>
    </el-form>
</template>

<script setup lang="ts">
import ReUpload from '@/components/ReUpload/index.vue'
import ReCol from "@/components/ReCol";
import folderSelect from './folderSelect.vue'
import type { FormRules } from "element-plus";

const props = defineProps({
    formInline: {
        type: Object,
        default: () => ({})
    },
    isLoading: {
        type: Boolean,
        default: false
    }
})
const ruleFormRef = ref();
const titles = {
    graphName: '图片名称',
    graphImage: '图片',
    groupId: '文件夹',
}
const prompt = {
    graphName: `请输入${titles.graphName}`,
    graphImage: `请上传${titles.graphImage}`,
    groupId: `请选择${titles.groupId}`,
}
const formRules = reactive(<FormRules>{
    groupId: [
        { required: true, message: prompt.groupId, trigger: 'blur' }
    ],
    graphName: [
        { required: true, message: prompt.graphName, trigger: 'blur' }
    ],
    graphImage: [
        { required: true, message: prompt.graphImage, trigger: 'blur' }
    ]
})
function getRef() {
    return ruleFormRef.value;
}

defineExpose({ getRef });
</script>
